<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商产品展示页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">Shopping Mall</div>
            <nav class="nav-links">
                <a href="#">首页</a>
                <a href="#">分类</a>
                <a href="#">热卖</a>
                <a href="#">关于我们</a>
            </nav>
            <div class="nav-actions">
                <button class="search-btn">搜索</button>
                <button class="cart-btn" id="cartBtn">
                    购物车 <span class="cart-count" id="cartCount">0</span>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container product-container">
        <!-- 产品展示 -->
        <section class="product-section">
            <!-- 产品图片轮播 -->
            <div class="product-gallery">
                <div class="main-image-container">
                    <div class="slides-container" id="slidesContainer">
                        <img src="https://picsum.photos/800/800?random=1" alt="产品主图1" class="slide-image active">
                        <img src="https://picsum.photos/800/800?random=2" alt="产品主图2" class="slide-image">
                        <img src="https://picsum.photos/800/800?random=3" alt="产品主图3" class="slide-image">
                        <img src="https://picsum.photos/800/800?random=4" alt="产品主图4" class="slide-image">
                    </div>
                    <button class="slide-btn prev-btn" id="prevSlide">&#10094;</button>
                    <button class="slide-btn next-btn" id="nextSlide">&#10095;</button>
                    <div class="slide-indicators" id="slideIndicators">
                        <span class="indicator active" data-index="0"></span>
                        <span class="indicator" data-index="1"></span>
                        <span class="indicator" data-index="2"></span>
                        <span class="indicator" data-index="3"></span>
                    </div>
                </div>
                <div class="thumbnail-container">
                    <img src="https://picsum.photos/200/200?random=1" alt="缩略图1" class="thumbnail active" data-index="0">
                    <img src="https://picsum.photos/200/200?random=2" alt="缩略图2" class="thumbnail" data-index="1">
                    <img src="https://picsum.photos/200/200?random=3" alt="缩略图3" class="thumbnail" data-index="2">
                    <img src="https://picsum.photos/200/200?random=4" alt="缩略图4" class="thumbnail" data-index="3">
                </div>
            </div>

            <!-- 产品信息 -->
            <div class="product-info">
                <h1 class="product-title">高级无线蓝牙耳机</h1>
                <div class="product-rating">
                    <div class="stars">★★★★★</div>
                    <span class="rating-count">(120 评价)</span>
                </div>
                <div class="product-price">¥<span class="price">899</span></div>
                <div class="product-discount">限时优惠: -20%</div>
                <p class="product-description">
                    这款高级无线蓝牙耳机采用最新蓝牙5.2技术，提供稳定连接和高清音质。主动降噪功能让您专注于音乐世界，长达30小时的续航时间满足您的日常使用需求。人体工学设计，佩戴舒适，适合长时间使用。
                </p>

                <!-- 颜色选择 -->
                <div class="product-options">
                    <h3>颜色</h3>
                    <div class="color-options" id="colorOptions">
                        <button class="color-option active" data-color="black" style="background-color: #000;"></button>
                        <button class="color-option" data-color="white" style="background-color: #fff; border: 1px solid #ccc;"></button>
                        <button class="color-option" data-color="blue" style="background-color: #1e90ff;"></button>
                        <button class="color-option" data-color="pink" style="background-color: #ff69b4;"></button>
                    </div>
                </div>

                <!-- 尺寸选择 -->
                <div class="product-options">
                    <h3>尺寸</h3>
                    <div class="size-options" id="sizeOptions">
                        <button class="size-option active" data-size="s">S</button>
                        <button class="size-option" data-size="m">M</button>
                        <button class="size-option" data-size="l">L</button>
                    </div>
                </div>

                <!-- 数量选择 -->
                <div class="product-options">
                    <h3>数量</h3>
                    <div class="quantity-selector">
                        <button class="quantity-btn decrease" id="decreaseBtn">-</button>
                        <input type="number" class="quantity-input" id="quantityInput" min="1" value="1">
                        <button class="quantity-btn increase" id="increaseBtn">+</button>
                    </div>
                </div>

                <!-- 购买按钮 -->
                <div class="purchase-actions">
                    <button class="btn primary-btn add-to-cart" id="addToCartBtn">加入购物车</button>
                    <button class="btn secondary-btn buy-now" id="buyNowBtn">立即购买</button>
                </div>

                <!-- 产品特色 -->
                <div class="product-features">
                    <div class="feature-item">
                        <span class="feature-icon">🚚</span>
                        <span>全国包邮</span>
                    </div>
                    <div class="feature-item">
                        <span class="feature-icon">🔄</span>
                        <span>7天无理由退换</span>
                    </div>
                    <div class="feature-item">
                        <span class="feature-icon">🛡️</span>
                        <span>两年质保</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 用户评价 -->
        <section class="reviews-section">
            <div class="section-header">
                <h2>用户评价</h2>
                <div class="review-filters">
                    <select class="review-sort" id="reviewSort">
                        <option value="latest">最新评价</option>
                        <option value="highest">评分最高</option>
                        <option value="lowest">评分最低</option>
                    </select>
                </div>
            </div>

            <div class="reviews-list" id="reviewsList">
                <!-- 评价项1 -->
                <div class="review-item">
                    <div class="review-header">
                        <div class="reviewer-info">
                            <img src="https://picsum.photos/40/40?random=10" alt="用户头像" class="reviewer-avatar">
                            <span class="reviewer-name">李明</span>
                            <div class="review-rating">★★★★★</div>
                        </div>
                        <div class="review-date">2024-01-15</div>
                    </div>
                    <div class="review-content">
                        音质非常好，降噪效果超出预期，佩戴也很舒适，长时间使用不会感到不适。续航能力也很强，一次充电可以使用很久。性价比很高，推荐购买！
                    </div>
                    <div class="review-images">
                        <img src="https://picsum.photos/100/100?random=20" alt="评价图片1" class="review-image">
                        <img src="https://picsum.photos/100/100?random=21" alt="评价图片2" class="review-image">
                    </div>
                </div>

                <!-- 评价项2 -->
                <div class="review-item">
                    <div class="review-header">
                        <div class="reviewer-info">
                            <img src="https://picsum.photos/40/40?random=11" alt="用户头像" class="reviewer-avatar">
                            <span class="reviewer-name">张华</span>
                            <div class="review-rating">★★★★☆</div>
                        </div>
                        <div class="review-date">2024-01-10</div>
                    </div>
                    <div class="review-content">
                        整体来说很不错，音质清晰，连接稳定。唯一的小缺点是在嘈杂环境下降噪效果还可以再提升一些。物流很快，包装也很精美。
                    </div>
                </div>

                <!-- 评价项3 -->
                <div class="review-item">
                    <div class="review-header">
                        <div class="reviewer-info">
                            <img src="https://picsum.photos/40/40?random=12" alt="用户头像" class="reviewer-avatar">
                            <span class="reviewer-name">王芳</span>
                            <div class="review-rating">★★★★★</div>
                        </div>
                        <div class="review-date">2024-01-05</div>
                    </div>
                    <div class="review-content">
                        第二次购买了，给家人也买了一副。质量一如既往的好，客服态度也很好，有问题都能及时解决。强烈推荐！
                    </div>
                    <div class="review-images">
                        <img src="https://picsum.photos/100/100?random=22" alt="评价图片" class="review-image">
                    </div>
                </div>
            </div>

            <!-- 加载更多评价 -->
            <button class="load-more-btn" id="loadMoreReviews">加载更多评价</button>
        </section>
    </main>

    <!-- 购物车侧边栏 -->
    <div class="cart-sidebar" id="cartSidebar">
        <div class="cart-header">
            <h3>购物车</h3>
            <button class="close-cart" id="closeCart">×</button>
        </div>
        <div class="cart-items" id="cartItems">
            <div class="empty-cart">购物车为空</div>
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                总计: ¥<span id="cartTotal">0</span>
            </div>
            <button class="btn checkout-btn">去结算</button>
        </div>
    </div>

    <!-- 购物车背景遮罩 -->
    <div class="cart-overlay" id="cartOverlay"></div>

    <!-- 成功提示 -->
    <div class="notification" id="notification"></div>

    <script src="script.js"></script>
</body>
</html>